<template>
	<joy-page class="joyPage" :fixed="true" :needLogin="false">
		<scroll-view style="width:100%;position: absolute;top: 0;bottom: 0;" scroll-y :scroll-top="scrollTop"
		 :lower-threshold="50" :refresher-enabled="true" :refresher-threshold="100" :refresherTriggered="triggered"
		 @refresherpulling="onPulling" @refresherrefresh="onRefresh" @scrolltolower='loadMore'>
			<view class="filter flex justify-between" @tap="showFilterList">
				<view >账单明细</view>
				<view >筛选 <text class="cuIcon-right"></text></view>
				<ul class="list" v-show="isShow">
				        <li
				          v-for="(item, index) in items"
				          :key="index"
				          @tap.stop="changeActive(item.type)"
				          :class="active === item.type ? 'active' : ''"
				        >
				          {{ item.name }}
				        </li>
				      </ul>
			</view>
			<view class="cu-modal" :class="isShow? 'show': '' " @click="isShow = !isShow"></view>
			<view>
				<view>
					<view class="flex bg-white notice-item align-center"  v-for="(item, index) in newList" :key="index">
						<!-- <view class="notice-image">
							<image v-if="item.type === '结算'" src="/static/img/balanceDetail1.png" mode="widthFix"></image>
							<image v-else-if="item.type === '充值'" src="/static/img/balanceDetail2.png" mode="widthFix"></image>
							<image v-else-if="item.type === '退还'" src="/static/img/balanceDetail3.png" mode="widthFix"></image>
							<image v-else-if="item.type === '消费'" src="/static/img/balanceDetail4.png" mode="widthFix"></image>
							<image v-else-if="item.type === '提现'" src="/static/img/balanceDetail5.png" mode="widthFix"></image>
						</view> -->
						<view class="flex-sub">
							<view class="notice-title">
								{{item.type}}
							</view>
							<view class="notice-num">
								单号：{{item.order}}
							</view>
							<view class="notice-time">
								 {{item.create_time}}
							</view>
						</view>
						<view class="notice-money" :class="
                item.type === '充值' ||
                item.type === '退还' ||
                item.type === '结算'
                  ? 'add'
                  : 'cut'
              ">
							{{item.money}}
						</view>
					</view>
				</view>
				
			</view>
			<reach-bottom></reach-bottom>
		</scroll-view>
	</joy-page>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import infoCard from "@/components/uni-card/infoCard.vue"
	export default {
		components: {
			infoCard
		},
		computed: {
			...mapState(['forcedLogin']),
			...mapGetters(['hasLogin'])
		},
		data() {
			let that = this;
			return {
				scrollComponents: '#tab-bar', // tab 容器 计算距离顶部距离使用
				scrollViewomponents: '#list', // 内容 容器 计算距离顶部距离使用
				scrollTop: 0, // scroll-view组件 距离顶部距离，点击tab时间置顶使用
				scrollLeft: 0,
				showComponent: false, // 是否显示
				top: 0, // 顶部监听事件使用
				triggered: false,
				imgUrl: that.$mConfig.assetsPath,
				banner: [],
				project: [],
				newList: [],
				grid: [],
				ka: [],
				adList: [],
				active: 0,
				isShow: false,
				info: {
					type: 0,
					curpage: 1
				},
				totalPage: 1,
				items: [
				        { type: 0, name: "全部" },
				        { type: 1, name: "消费" },
				        { type: 2, name: "充值" },
				        { type: 3, name: "退还" },
				        { type: 4, name: "结算" },
				        { type: 5, name: "提现" }
				      ]
			}
		},
		async onLoad(query) {
			await this.$AppEntryController.main(query);
			this.getInfo();
		},
		methods: {
			showFilterList(){
				this.isShow = !this.isShow
			},
			changeActive(type){
				this.active = type;
				this.info.type = type;
				this.isShow = false;
				this.getInfo(true)
			},
			onPulling(e) {
				this.triggered = true
			},
			onRefresh() {
				if (this.active === 0) {
				   this.getInfo(true);
				} else {
				   this.getAffiche(true);
				}
			},
			loadMore() {
				if (this.totalPage > this.info.curpage) {
					this.$store.commit("changeIsMore", true);
					this.$store.commit("changeIsEnd", false);
					this.info.curpage++
					if (this.active === 0) {
					   this.getInfo();
					} else {
					   this.getAffiche();
					}
				} else {
					this.$store.commit("changeIsEnd", true);
					this.$store.commit("changeIsMore", false);
				}
			},
			async getInfo(isRefresh) {
				if (isRefresh) {
					this.info.curpage = 1
					this.newList = []
					this.triggered = false
				}
				let indexInfo = await this.$apis.getCashFlow(this.info);
					this.totalPage = indexInfo.total_page
					this.newList.push(...indexInfo.list);
					if (indexInfo.total_count === 0) {
						this.$store.commit("changeIsEmpty", true);
					} else {
						this.$store.commit("changeIsEmpty", false);
					}
				// console.log(this.newList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.safe {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(50, 50, 50, 1);
		margin-bottom: 1rpx;
		padding-bottom: 19rpx;

		.safe-img {
			width: 112rpx;
			height: 112rpx;
		}
	}
	.nav {
		z-index: 100;
		margin-bottom: 0;
	
		.block {
			width: 100%;
			height: 24rpx;
			background: rgba(246, 246, 246, 1);
		}
	}
	.project {
		margin-bottom: 24rpx;
	}

	.title {
		display: flex;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(50, 50, 50, 1);
		line-height: 102rpx;
		background-color: #FFFFFF;
		padding: 4rpx 30rpx 0rpx;
		justify-content: space-between;

		.more {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 106, 0, 1);
		}
	}
	.notice-image{
		width:64rpx;
		height:64rpx;
		background:rgba(255,106,0,1);
		border-radius:50%;
		margin-right: 30rpx;
		position: relative;
		.cuIcon-noticefill{
			font-size: 34rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.cu-tag{
			position: absolute;
			left: -10rpx;
			top: 0;
		}
	}
	.notice-read{
		background: #bbbbbb;
	}
	.notice-item{
		padding: 32rpx 30rpx 32rpx 40rpx;
		margin-bottom: 1rpx;
	}
	.notice-title{
		font-size:32rpx;
		font-family:PingFang SC;
		color:rgba(51,51,51,1);
	}
	.notice-num{
		font-size:28rpx;
		font-family:PingFang SC;
		color:rgba(102,102,102,1);
		line-height: 64rpx;
	}
	.notice-time{
		font-size:24rpx;
		font-family:PingFang SC;
		color:rgba(153,153,153,1);
	}
	.notice-money{
		font-size:34rpx;
		font-family:PingFang SC;
		color:#9F9F9F;
	}
	.add {
		color: #FF4646;
	    &:before {
	      content: "+";
	    }
	  }
	  .filter{
		  background: #F7F7F7;
		  font-size:30rpx;
		  font-family:PingFang SC;
		  color: #323232;
		  padding: 21rpx 30rpx;
		  text-align: right;
		  position: relative;
		  z-index: 1200;
		  .list{
			  background-color: #FFFFFF;
			  position: absolute;
			  right: 0;
			  top: 70rpx;
			  li{
				  padding: 30rpx 103rpx;
				  font-size:34rpx;
				  font-family:PingFang SC;
				  color:rgba(50,50,50,1);
			  }
		  }
	  }
</style>
